<template>
  <div :class="container">
    <div class="forms-container">
      <div class="signin-signup ">
        <el-form class="sign-in-form" v-on:submit.prevent>
          <h2 class="title">登录</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" v-model="login.uname" placeholder="用户名" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" v-model="login.pword" placeholder="密码" />
          </div>
          <button class="btn solid" @click="onSubmit">立即登录</button>
          <p class="social-text">通过其他方式</p>
          <div class="social-media">
            <input type="submit" class="btn" value="通过人脸方式登录" @click="sxt()" />
          </div>
        </el-form>
        <!--注册-->
        <form class="sign-up-form">
          <h2 class="title">注册</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" v-model="regist.uname" placeholder="用户名" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" v-model="regist.pword" placeholder="密码" />
          </div>
          <input type="submit" class="btn" @click="register" value="立即注册" />
        </form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>还没有账号？</h3>
          <p>

          </p>
          <button class="btn transparent" id="sign-up-btn" @click="signUp()">
            去注册
          </button>
        </div>
        <img src="../assets/img/log.svg" class="image" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>已有帐号？</h3>
          <p>
            立即登录已有帐号。
          </p>
          <button class="btn transparent" id="sign-in-btn" @click="signIn">
            去登录
          </button>
        </div>
        <img src="../assets/img/register.svg" class="image" alt="" />
      </div>
    </div>
    <div class="rl">
      <el-dialog v-model="visible" width="30%" height="30%" center title="请注视摄像头">
        <Rlsb></Rlsb>
      </el-dialog>
    </div>


  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import axios from "axios";
import { useStore } from "vuex"
import Rlsb from '../views/rlsb.vue'
import { startCase } from "lodash";

const store = useStore()

const router = useRouter();
const visible = ref(false);
const login = reactive({
  uname: "",
  pword: "",
  img: '',
});

// 注册
const regist = reactive({
  uname: "",
  pword: ""
})


const os = ref(false); //控制摄像头开关
let thisVideo = ref("");
let thisContext = ref("");
let thisCancas = ref("");
const videoWidth = ref(260);
const videoHeight = ref(260);
const postOptions = ref([]);
const certCtl = ref("");
const mask = ref(true);
const closedPhono = ref(null);



//绘制图片
// 

const onSubmit = () => {
  axios.get(`http://localhost:8068/users/login/${login.uname}/${login.pword}`).then(res => {
    console.log(res.data.data)
    store.commit("SET_USER", res.data.data)
    router.push({
      path: "/home",
    }
    )
  });
};

// 注册
const register = () => {
  console.log(regist.uname)
  if (regist.uname != "" && regist.pword != "") {
    axios.post(`http://localhost:8068/users/register`, {
      "uname": regist.uname,
      "pword": regist.pword
    }).then(res => {
      if (res.data.flag) {
        router.push({
          path: "/login",
        });

        ElMessage.success('注册成功,返回登录界面,进行登录');
      } else {
        ElMessage.error('注册失败，请修改信息')
      }
    })
  } else {
    ElMessage.error('账号或密码为空')
  }
}

var container = ref('container')

const signUp = () => {
  container.value = "container" + " sign-up-mode"
}
const signIn = () => {
  container.value = "container"
}
const img = ref('');


const sxt = () => {
  visible.value = true;
  store.state.iff = true;
  setTimeout(() => {
    visible.value = false;
    console.log(store.state.dataImg);
    img.value = store.state.dataImg
    if (img.value !== '') {
      ElMessage.success('认证成功');
      router.push({
        path: '/home'
      })
    }
  }, 5000);
}

</script>

<style scoped>
@import '../assets/style/style.css';

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.rl {
  height: 100px;
  width: 100px;
}
</style>